<template>
  <view class="chat-log">
  	<view class="log-card">
  		<view class="log-bg">
  			<view class="log-title-top">日志</view>
  		</view>
  		<view class="log-title">{{ JSON.parse(detail.content).title }}</view>
  		<view class="log-content">
  			<up-parse :content="truncateValue(JSON.parse(detail.content).content, 4) "></up-parse>
  		</view>
  		<view class="detail-btn" @click="viewLogDetail(JSON.parse(detail.content))">
  			查看详情
  		</view>
  	</view>
  </view>
</template>

<script>
import { chatApi } from '@/apis/cloud/chat'

export default {
  name: 'ApplyItem',
  props: {
		detail: {
			type: Object,
			required: true
		},
  },
  data() {
		return {

		}
	},
	methods: {
		truncateValue(text, maxLines = 4) {
		  const lineCharCount = 19;
		  const maxLength = lineCharCount * maxLines;
		  if (text === null || text === undefined) return '';
		  const str = String(text);
		  if (str.length <= maxLength) return str;
		  return str.slice(0, maxLength) + '...';
		},
		viewLogDetail(value){
		  uni.navigateTo({
		    url: `/pages/chatlog/index?id=${value.id}`,
		  });
		},
  }
};
</script>

<style lang="scss" scoped>
	@import "../../config/global.scss";
/* 日志消息样式 */
.log-card {
	position: relative;
  background: #c9e7ff;
  border-radius: 16rpx;
  padding: 2rpx;
  margin: 8rpx auto;
  width: 450rpx;
}

.log-bg {
	width: 100%;
	left: 0;
	top:0;
	border-radius: 10px 10px 0px 0px;
	position:absolute;
	height: 30px;
	font-weight: bold;
	line-height: 30px;
	background-color: #e0ecff;
	color: #016fff;
	padding-left: 10px;
}

.log-title {
	margin-top: 60rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
	padding-left: 10px;
}

.log-content {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 20rpx;
  line-height: 40rpx;
	padding-left: 10px;
}

.log-content ::v-deep p {
  margin: 0 0 10rpx 0;
  line-height: 1.6;
}

.log-content ::v-deep p:last-child {
  margin-bottom: 0;
}
.detail-btn {
  margin: 0 auto;
  width: 100%;
  background-color: #f3f3f4;
  margin-top: 10px;
  text-align: center;
  font-size: 28rpx;
  color: #0066ff;
  padding: 6px 0;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
}
</style>
